<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>主页</title>
    <style>
        /* 清除默认样式的代码 */
        /* 去除常见标签默认的 margin 和 padding */
        body,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        p,
        ul,
        ol,
        li,
        dl,
        dt,
        dd,
        input {
            margin: 0;
            padding: 0;
        }

        /* 內减模式 */
        * {
            box-sizing: border-box;
        }

        /* 设置网页统一的字体大小、行高、字体系列相关属性 */
        body {
            font: 16px/1.5 "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei",
            "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
            color: #333;
        }

        /* 去除列表默认样式 */
        ul,
        ol {
            list-style: none;
        }

        /* 去除默认的倾斜效果 */
        em,
        i {
            font-style: normal;
        }

        /* 去除a标签默认下划线，并设置默认文字颜色 */
        a {
            text-decoration: none;
            color: #333;
        }

        /* 设置img的垂直对齐方式为居中对齐，去除img默认下间隙 */
        img {
            vertical-align: middle;
        }

        /* 去除input默认样式 */
        input {
            border: none;
            outline: none;
            color: #333;
        }

        /* 左浮动 */
        .fl {
            float: left;
        }

        /* 右浮动 */
        .fr {
            float: right;
        }

        /* 双伪元素清除法 */
        .clearfix::before,
        .clearfix::after {
            content: "";
            display: table;
        }
        .clearfix::after {
            clear: both;
        }



        .title{
            height: 75px;
            width: 100%;
            box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2);
            background-color: rgba(230, 230, 230, 0.6);
            backdrop-filter: blur(60px);
            position: fixed;
            z-index: 1000;
        }

        .maintitle{
            height: 75px;
            margin: 0 auto;

        }

        .titleh{
            line-height: 75px;
            margin-left: 20px;
            font-size: 24px;
            color: #000;
        }

        .mainarea{
            display: inline-block;
            margin: 0 auto;
            padding: 15px 15px;
            padding-top: 50px;
            padding-bottom: 50px;
        }

        .cards{
            margin: 0 auto;
            display: inline-block;
            text-align: left;
            transition: all 0.3s;
        }

        .card{
            width: 345px;
            height: 230px;
            border-radius: 10px;
            background-color: rgb(230,230,230);
            transition: all .3s;
            margin-right: 10px;
            margin-top: 15px;
        }

        .card_top{
            width: 345px;
            height: 230px;
            border-radius: 10px;
            background-image: linear-gradient(rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.3));
            text-align: unset;
            transition: all .3s;
            display: block;
        }

        .main{
            margin: 0 auto;
            text-align: center;
        }

        .mainarea{
            text-align: left;
        }

        .card_top>div{
            color: white;
        }

        .card_title{
            transition: all .3s;
            width: 345px;
        }

        .card_text{
            opacity: 0%;
            transition: all .3s;
        }

        .card:hover{
            transform: translateY(-3px);
        }

        .card:active{
            transition: all .05s;
            scale: 93%;
        }

        .card:hover .card_top{
            backdrop-filter: blur(15px);
            /*background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));*/
        }

        .card:hover .card_title{
            transform: translateY(-25px);
        }

        .card:hover .card_text{
            transform: translateY(-15px);
            opacity: 100%;
        }

        body{
            overflow-x: hidden;
        }

        .main{
            height: 1000px;
        }

        .blkbgc{
            background-color: rgba(0, 0, 0, 0.2);
            position: fixed;
            top: 75px;
            z-index: 2000;
            visibility: hidden;
        }

        .blkbgcinside{
            width: 600px;
            height: 400px;
            border-radius: 5px;
            z-index: 2001;
            background-color: white;
            box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.2);
            position: absolute;
        }

        .blkbgc:hover{

        }


        .sk-fading-circle {
            margin: 100px auto;
            width: 40px;
            height: 40px;
            position: relative;
        }

        .sk-fading-circle .sk-circle {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
        }

        .sk-fading-circle .sk-circle:before {
            content: '';
            display: block;
            margin: 0 auto;
            width: 15%;
            height: 15%;
            background-color: #333;
            border-radius: 100%;
            -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
            animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
        }
        .sk-fading-circle .sk-circle2 {
            -webkit-transform: rotate(30deg);
            -ms-transform: rotate(30deg);
            transform: rotate(30deg);
        }
        .sk-fading-circle .sk-circle3 {
            -webkit-transform: rotate(60deg);
            -ms-transform: rotate(60deg);
            transform: rotate(60deg);
        }
        .sk-fading-circle .sk-circle4 {
            -webkit-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
            transform: rotate(90deg);
        }
        .sk-fading-circle .sk-circle5 {
            -webkit-transform: rotate(120deg);
            -ms-transform: rotate(120deg);
            transform: rotate(120deg);
        }
        .sk-fading-circle .sk-circle6 {
            -webkit-transform: rotate(150deg);
            -ms-transform: rotate(150deg);
            transform: rotate(150deg);
        }
        .sk-fading-circle .sk-circle7 {
            -webkit-transform: rotate(180deg);
            -ms-transform: rotate(180deg);
            transform: rotate(180deg);
        }
        .sk-fading-circle .sk-circle8 {
            -webkit-transform: rotate(210deg);
            -ms-transform: rotate(210deg);
            transform: rotate(210deg);
        }
        .sk-fading-circle .sk-circle9 {
            -webkit-transform: rotate(240deg);
            -ms-transform: rotate(240deg);
            transform: rotate(240deg);
        }
        .sk-fading-circle .sk-circle10 {
            -webkit-transform: rotate(270deg);
            -ms-transform: rotate(270deg);
            transform: rotate(270deg);
        }
        .sk-fading-circle .sk-circle11 {
            -webkit-transform: rotate(300deg);
            -ms-transform: rotate(300deg);
            transform: rotate(300deg);
        }
        .sk-fading-circle .sk-circle12 {
            -webkit-transform: rotate(330deg);
            -ms-transform: rotate(330deg);
            transform: rotate(330deg);
        }
        .sk-fading-circle .sk-circle2:before {
            -webkit-animation-delay: -1.1s;
            animation-delay: -1.1s;
        }
        .sk-fading-circle .sk-circle3:before {
            -webkit-animation-delay: -1s;
            animation-delay: -1s;
        }
        .sk-fading-circle .sk-circle4:before {
            -webkit-animation-delay: -0.9s;
            animation-delay: -0.9s;
        }
        .sk-fading-circle .sk-circle5:before {
            -webkit-animation-delay: -0.8s;
            animation-delay: -0.8s;
        }
        .sk-fading-circle .sk-circle6:before {
            -webkit-animation-delay: -0.7s;
            animation-delay: -0.7s;
        }
        .sk-fading-circle .sk-circle7:before {
            -webkit-animation-delay: -0.6s;
            animation-delay: -0.6s;
        }
        .sk-fading-circle .sk-circle8:before {
            -webkit-animation-delay: -0.5s;
            animation-delay: -0.5s;
        }
        .sk-fading-circle .sk-circle9:before {
            -webkit-animation-delay: -0.4s;
            animation-delay: -0.4s;
        }
        .sk-fading-circle .sk-circle10:before {
            -webkit-animation-delay: -0.3s;
            animation-delay: -0.3s;
        }
        .sk-fading-circle .sk-circle11:before {
            -webkit-animation-delay: -0.2s;
            animation-delay: -0.2s;
        }
        .sk-fading-circle .sk-circle12:before {
            -webkit-animation-delay: -0.1s;
            animation-delay: -0.1s;
        }

        @-webkit-keyframes sk-circleFadeDelay {
            0%, 39%, 100% { opacity: 0; }
            40% { opacity: 1; }
        }

        @keyframes sk-circleFadeDelay {
            0%, 39%, 100% { opacity: 0; }
            40% { opacity: 1; }
        }

        body{
            overflow: hidden;
        }


        #miniplayer{
            border: 0px;
            position: fixed;
            right: 20px;
            bottom: 20px;
            width: 325px;
            height: 125px;
            overflow: hidden;
            z-index: 9999;
        }

    </style>
    <script>

        function auto_adapt_size(){
            let width_of_website=window.innerWidth;
            if(width_of_website<=1920){
                document.getElementById("maintitle").style.width="100%";
                document.getElementById("main").style.width="100%";
            }else{
                document.getElementById("maintitle").style.width="1920px";
                document.getElementById("main").style.width="1920px";
            }
            if(width_of_website<=1490){
                document.getElementById("mainarea").style.textAlign="center";
            }else{
                document.getElementById("mainarea").style.textAlign="left";
            }
            if(width_of_website<=1824){
                document.getElementById("mainarea").style.paddingLeft=(width_of_website-345*4-70)/2 + "px";
                document.getElementById("mainarea").style.marginLeft="0px";
            }else{
                document.getElementById("mainarea").style.paddingLeft="15px";
                if(width_of_website<=1920){
                    document.getElementById("mainarea").style.marginLeft=(width_of_website-345*5-98)/2 + "px";
                }else{
                    document.getElementById("mainarea").style.marginLeft=(1920-345*5-98)/2 + "px";
                }
            }
            document.getElementById("waitshow").style.visibility="hidden";
            document.getElementById("main").style.visibility="visible";
            document.body.style.overflowY="scroll";

            document.getElementById("blkbgcinside").style.left=(window.innerWidth-document.getElementById("blkbgcinside").style.width.replace("px",""))/2 + "px";
            document.getElementById("blkbgcinside").style.top=(window.innerHeight-document.getElementById("blkbgcinside").style.height.replace("px",""))/2 + "px";

            document.getElementById("blkbgc").style.width=window.innerWidth + "px";
            document.getElementById("blkbgc").style.height=window.innerHeight-75 + "px";


        }
    </script>

    <link rel="stylesheet" href="./control_2/CSS/style_of_control.css">
    <script src="./control_2/JS/control.js"></script>
</head>
<body onresize="auto_adapt_size()" onload="auto_adapt_size()" style="background-color: rgb(255,255,255);margin: 0 0 0 0;padding: 0 0 0 0;">

<iframe src="https://lcuzty.github.io/lcuzty/miniplayer/iframe.html" id="miniplayer"></iframe>

<div class="control">
    <div class="control_back" id="control_back" onclick="open_or_close_sidebar()" onmousemove="control_adapt()">

    </div>
    <div class="control_button_base" id="control_button_base">
        <div class="control_button" onclick="open_or_close_sidebar()" onmousemove="control_adapt()">
        </div>
        <p>lcuzty</p>
    </div>
    <div class="control_sidebar" id="control_sidebar">
        <div class="control_sidebar_button_base">
            <iframe src="https://lcuzty.github.io/lcuzty/control/iframe.html" class="control_sidebar_iframe" id="control_sidebar_iframe">

            </iframe>
        </div>
    </div>
</div>

    <div class="blkbgc" id="blkbgc">
        <div class="blkbgcinside" id="blkbgcinside">

        </div>
    </div>
    <div class="title" id="title">
        <div class="maintitle" id="maintitle">
            <p class="titleh">lcuzty</p>
        </div>
    </div>
    <div id="waitshow" style="width: 100%;text-align: center;position: absolute;top: 200px">
        <div class="sk-fading-circle">
            <div class="sk-circle1 sk-circle"></div>
            <div class="sk-circle2 sk-circle"></div>
            <div class="sk-circle3 sk-circle"></div>
            <div class="sk-circle4 sk-circle"></div>
            <div class="sk-circle5 sk-circle"></div>
            <div class="sk-circle6 sk-circle"></div>
            <div class="sk-circle7 sk-circle"></div>
            <div class="sk-circle8 sk-circle"></div>
            <div class="sk-circle9 sk-circle"></div>
            <div class="sk-circle10 sk-circle"></div>
            <div class="sk-circle11 sk-circle"></div>
            <div class="sk-circle12 sk-circle"></div>
        </div>
    </div>
    <div class="main" id="main" style="width: 100%;visibility: hidden">
        <div style="height: 75px;width: 100%"></div>
        <div class="mainarea" id="mainarea">
            <div style="font-size: 21px;line-height: 75px">个人</div>
            <div class="cards">
                <div class="card" style="background-image: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fww4.sinaimg.cn%2Flarge%2F6830a53bly1g7gn0flwjcj20g809qgma.jpg&refer=http%3A%2F%2Fwww.sina.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1675066416&t=266378623a279d0da9c3fa16813fef5e);background-size: cover;background-position: center;background-repeat: no-repeat">
                    <a href="https://lcuzty.github.io/lcuzty/weipe/" target="_self" class="card_top">
                        <div class="card_title" style="width: 420px;height: 30px;font-size: 23px;padding-top: 155px;text-align: left;padding-left: 35px">前端作业一</div>
                        <div class="card_text" style="text-align: left;font-size: 13px;padding-top: 35px;padding-left: 35px;">2023/1/2</div>
                    </a>
                </div>
            </div>
            <div class="cards">
                <div class="card" style="background-image: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fww4.sinaimg.cn%2Flarge%2F6830a53bly1g7gn0flwjcj20g809qgma.jpg&refer=http%3A%2F%2Fwww.sina.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1675066416&t=266378623a279d0da9c3fa16813fef5e);background-size: cover;background-position: center;background-repeat: no-repeat">
                    <a href="https://lcuzty.github.io/lcuzty/lcuhomepage" target="_self" class="card_top">
                        <div class="card_title" style="width: 420px;height: 30px;font-size: 23px;padding-top: 155px;text-align: left;padding-left: 35px">前端作业二</div>
                        <div class="card_text" style="text-align: left;font-size: 13px;padding-top: 35px;padding-left: 35px;">2023/1/5</div>
                    </a>
                </div>
            </div>
            <div class="cards">
                <div class="card" style="background-image: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fww4.sinaimg.cn%2Flarge%2F6830a53bly1g7gn0flwjcj20g809qgma.jpg&refer=http%3A%2F%2Fwww.sina.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1675066416&t=266378623a279d0da9c3fa16813fef5e);background-size: cover;background-position: center;background-repeat: no-repeat">
                    <a href="https://lcuzty.github.io/lcuzty/格创计算机协会" target="_self" class="card_top">
                        <div class="card_title" style="width: 420px;height: 30px;font-size: 23px;padding-top: 155px;text-align: left;padding-left: 35px">格创计算机协会</div>
                        <div class="card_text" style="text-align: left;font-size: 13px;padding-top: 35px;padding-left: 35px;">2022/12/29</div>
                    </a>
                </div>
            </div>
            <div class="cards">
                <div class="card" style="background-image: url(https://img0.baidu.com/it/u=681967007,1180314425&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500);background-size: cover;background-position: center;background-repeat: no-repeat">
                    <a href="https://lcuzty.github.io/lcuzty/calender" target="_self" class="card_top">
                        <div class="card_title" style="width: 420px;height: 30px;font-size: 23px;padding-top: 155px;text-align: left;padding-left: 35px">日历</div>
                        <div class="card_text" style="text-align: left;font-size: 13px;padding-top: 35px;padding-left: 35px;">2022/12/31</div>
                    </a>
                </div>
            </div>
            <div class="cards">
                <div class="card" style="background-image: url(https://img0.baidu.com/it/u=681967007,1180314425&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500);background-size: cover;background-position: center;background-repeat: no-repeat">
                    <a href="https://lcuzty.github.io/lcuzty/lcuzty - warning/index.html?11" target="_self" class="card_top">
                        <div class="card_title" style="width: 420px;height: 30px;font-size: 23px;padding-top: 155px;text-align: left;padding-left: 35px">在线日历</div>
                        <div class="card_text" style="text-align: left;font-size: 13px;padding-top: 35px;padding-left: 35px;">即将上线</div>
                    </a>
                </div>
            </div>
            <div style="font-size: 21px;line-height: 75px;margin-top: 30px">推荐</div>
            <div class="cards">
                <div class="card" style="background-image: url(https://www.lcu.edu.cn/images/content/2015-03/20150322105707120943.jpg);background-size: cover;background-position: center;background-repeat: no-repeat">
                    <a href="https://www.lcu.edu.cn/" target="_self" class="card_top">
                        <div class="card_title" style="width: 420px;height: 30px;font-size: 23px;padding-top: 155px;text-align: left;padding-left: 35px">聊城大学</div>
                        <div class="card_text" style="text-align: left;font-size: 13px;padding-top: 35px;padding-left: 35px;">聊城大学官网</div>
                    </a>
                </div>
            </div>
            <div class="cards">
                <div class="card" style="background-image: url(https://www.lcu.edu.cn/images/content/2015-06/20150629161915191756.jpg);background-size: cover;background-position: center;background-repeat: no-repeat">
                    <a href="https://cs.lcu.edu.cn/" target="_self" class="card_top">
                        <div class="card_title" style="width: 420px;height: 30px;font-size: 23px;padding-top: 155px;text-align: left;padding-left: 35px">计算机学院</div>
                        <div class="card_text" style="text-align: left;font-size: 13px;padding-top: 35px;padding-left: 35px;">聊城大学计算机学院官网</div>
                    </a>
                </div>
            </div>
            <div class="cards">
                <div class="card" style="background-image: url(https://img0.baidu.com/it/u=3803744022,761825036&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=477);background-size: cover;background-position: center;background-repeat: no-repeat">
                    <a href="https://convertio.co/zh/" target="_self" class="card_top">
                        <div class="card_title" style="width: 420px;height: 30px;font-size: 23px;padding-top: 155px;text-align: left;padding-left: 35px">文件转换器</div>
                        <div class="card_text" style="text-align: left;font-size: 13px;padding-top: 35px;padding-left: 35px;">将您的文件转换成任意格式</div>
                    </a>
                </div>
            </div>
            <div class="cards">
                <div class="card" style="background-image: url(https://img0.baidu.com/it/u=3803744022,761825036&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=477);background-size: cover;background-position: center;background-repeat: no-repeat">
                    <a href="https://next.itellyou.cn/Identity/Account/Login?ReturnUrl=%2FOriginal%2FIndex" target="_self" class="card_top">
                        <div class="card_title" style="width: 420px;height: 30px;font-size: 23px;padding-top: 155px;text-align: left;padding-left: 35px">NEXT, ITELLYOU</div>
                        <div class="card_text" style="text-align: left;font-size: 13px;padding-top: 35px;padding-left: 35px;">原版软件</div>
                    </a>
                </div>
            </div>
            <div class="cards">
                <div class="card" style="background-image: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg-blog.csdnimg.cn%2Fimg_convert%2Fbbeecc6629bcdbc7242c352ce00957fe.png&refer=http%3A%2F%2Fimg-blog.csdnimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1675085203&t=53cedac42b33790c7b8328fdc9af843b);background-size: cover;background-position: center;background-repeat: no-repeat">
                    <a href="https://cn.vuejs.org/guide/introduction.html" target="_self" class="card_top">
                        <div class="card_title" style="width: 420px;height: 30px;font-size: 23px;padding-top: 155px;text-align: left;padding-left: 35px">Vue.js</div>
                        <div class="card_text" style="text-align: left;font-size: 13px;padding-top: 35px;padding-left: 35px;">简介</div>
                    </a>
                </div>
            </div>
            <div class="cards">
                <div class="card" style="background-image: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg2.doubanio.com%2Fview%2Fgroup_topic%2Fl%2Fpublic%2Fp55149552.jpg&refer=http%3A%2F%2Fimg2.doubanio.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1675138265&t=e5ea9a2d49946c511e57ae636db38a88);background-size: cover;background-position: center;background-repeat: no-repeat">
                    <a href="https://www.w3school.com.cn/" target="_self" class="card_top">
                        <div class="card_title" style="width: 420px;height: 30px;font-size: 23px;padding-top: 155px;text-align: left;padding-left: 35px">W3Cschool</div>
                        <div class="card_text" style="text-align: left;font-size: 13px;padding-top: 35px;padding-left: 35px;">领先的 Web 技术教程 - 全部免费</div>
                    </a>
                </div>
            </div>
            <div class="cards">
                <div class="card" style="background-image: url(https://img0.baidu.com/it/u=3803744022,761825036&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=477);background-size: cover;background-position: center;background-repeat: no-repeat">
                    <a href="https://www.programmercarl.com/" target="_self" class="card_top">
                        <div class="card_title" style="width: 420px;height: 30px;font-size: 23px;padding-top: 155px;text-align: left;padding-left: 35px">代码随想录</div>
                        <div class="card_text" style="text-align: left;font-size: 13px;padding-top: 35px;padding-left: 35px;">认准代码随想录 学习算法不迷路</div>
                    </a>
                </div>
            </div>
            <div class="cards">
                <div class="card" style="background-image: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.leixue.com%2Fuploads%2F2020%2F03%2FCSDN.png%21760&refer=http%3A%2F%2Fwww.leixue.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1675151095&t=8e03b66e0071cf0e7ddcfd9fd102eabc);background-size: cover;background-position: center;background-repeat: no-repeat">
                    <a href="https://www.csdn.net/" target="_self" class="card_top">
                        <div class="card_title" style="width: 420px;height: 30px;font-size: 23px;padding-top: 155px;text-align: left;padding-left: 35px">CSDN</div>
                        <div class="card_text" style="text-align: left;font-size: 13px;padding-top: 35px;padding-left: 35px;">专业开发者社区</div>
                    </a>
                </div>
            </div>
            <div class="cards">
                <div class="card" style="background-image: url(https://img1.baidu.com/it/u=2206846777,393204060&fm=253&fmt=auto&app=138&f=JPEG?w=888&h=500);background-size: cover;background-position: center;background-repeat: no-repeat">
                    <a href="https://leetcode.cn/" target="_self" class="card_top">
                        <div class="card_title" style="width: 420px;height: 30px;font-size: 23px;padding-top: 155px;text-align: left;padding-left: 35px">力扣</div>
                        <div class="card_text" style="text-align: left;font-size: 13px;padding-top: 35px;padding-left: 35px;">全球极客挚爱的技术成长平台</div>
                    </a>
                </div>
            </div>
            <div class="cards">
                <div class="card" style="background-image: url(https://img0.baidu.com/it/u=3803744022,761825036&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=477);background-size: cover;background-position: center;background-repeat: no-repeat">
                    <a href="https://pintia.cn/problem-sets/dashboard" target="_self" class="card_top">
                        <div class="card_title" style="width: 420px;height: 30px;font-size: 23px;padding-top: 155px;text-align: left;padding-left: 35px">PTA</div>
                        <div class="card_text" style="text-align: left;font-size: 13px;padding-top: 35px;padding-left: 35px;">程序设计类实验辅助教学平台</div>
                    </a>
                </div>
            </div>
            <div class="cards">
                <div class="card" style="background-image: url(https://img0.baidu.com/it/u=3803744022,761825036&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=477);background-size: cover;background-position: center;background-repeat: no-repeat">
                    <a href="https://www.iconfont.cn/" target="_self" class="card_top">
                        <div class="card_title" style="width: 420px;height: 30px;font-size: 23px;padding-top: 155px;text-align: left;padding-left: 35px">iconfont</div>
                        <div class="card_text" style="text-align: left;font-size: 13px;padding-top: 35px;padding-left: 35px;">阿里巴巴矢量图标库</div>
                    </a>
                </div>
            </div>

        </div>
        <div style="width: 100%;height: 60px;background-color: rgb(230,230,230);text-align: center;margin-top: 50px;">
            <p style="line-height: 60px">Copyright © 2023 by Zhang Tianyu</p>
        </div>
    </div>
</body>
</html>